import React, { Component } from 'react';
import { connect } from 'dva';
import { Table, Input, DatePicker, Button, Row, Col, Select, Form, Modal, Popconfirm, Popover, Icon, message } from 'antd';
import CheckRemark from './component/check_remark';

const FormItem = Form.Item;
const Option = Select.Option;
const { RangePicker } = DatePicker;

@window.regStateCache
class AbnormalOrder extends Component {

  constructor() {
    super();
    this.state = {
      modalVisible: false,
      title: '', // modal的title
    };
  }

  handleSubmit(e, page, pageSize) {
    if (e) e.preventDefault();
    const { currentPageSize } = this.props;
	  this.props.dispatch({
      type: 'order/queryOrderList',
      payload: {
        checkStatus: 10000,
        pageIndex: typeof page === 'number' ? page : 1,
        pageSize: pageSize || currentPageSize,
      },
    });
  }

  render() {
    const p = this;
    const { form, dispatch, currentPage, orderList = [], orderTotal, currentPageSize } = p.props;
    const { getFieldDecorator, resetFields } = form;
    const { title, modalVisible } = p.state;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };

    const columnsList = [
      { title: '主订单号', dataIndex: 'orderNo', key: 'orderNo', width: 135 },
      { title: '销售员', dataIndex: 'salesName', key: 'salesName', width: 60, render(text) { return text || '-'; } },
      { title: '小程序下单人', dataIndex: 'nickName', key: 'nickName', width: 60,render(text) { return text || '-'; } },
      { title: '实付金额', dataIndex: 'payment', key: 'payment', width: 50,render(text) { return text || '-'; } },
      { title: '商户订单号',dataIndex: 'wxPayTradeNo', key: 'wxPayTradeNo', width: 155, render(text) { return text || '-'; } },
      { title: '销售时间', dataIndex: 'orderTime', key: 'orderTime', width: 90, render(text) { return text ? text : '-'; } },
      { title: '异常状态',
        dataIndex: 'checkStatus',
        key: 'checkStatus',
        width: 60,
        render(text) {
          switch (text) {
            case 1: return <font color="red">金额异常</font>;
            case -1: return <font color="red">支付异常</font>;
            default: return '-';
          }
        },
      },
      { title: '活动类型',
        dataIndex: 'activityCode',
        key: 'activityCode',
        width: 60,
        render(text) {
          switch (text) {
            case 0: return <font>砍价</font>;
            case 1: return <font>花币</font>;
            case 2: return <font>优惠券</font>;
            default: return '-';
          }
        },
      },
      { title: '活动金额', dataIndex: 'activityMoney', key: 'activityMoney', width: 50, render(text) { return text || '-'; } },
      { title: '异常备注', dataIndex: 'checkRemark', key: 'checkRemark', width: 150, render(text) { return text || '-'; } },
      { title: '操作',
        dataIndex: 'operator',
        key: 'operator',
        width: 80,
        render(text, record) {
          return (
            <div>
	            <CheckRemark dispatch={dispatch} record={record} handleSubmit={p.handleSubmit.bind(p)} page={currentPage} />
            </div>);
        },
      },
    ];

    const listPaginationProps = {
      total: orderTotal,
      current: currentPage,
      pageSize: currentPageSize,
      showSizeChanger: true,
      onChange(pageIndex) {
        p.handleSubmit(null, pageIndex);
      },
      pageSizeOptions: ['20', '50', '100', '200', '500'],
      onShowSizeChange(current, size) {
        p.handleSubmit(null, 1, size);
      },
    };

    return (
      <div>
  			<div className="refresh-btn"><Button type="ghost" size="small" onClick={p._refreshData.bind(p)}>刷新</Button></div>
        <Row>
          <Col>
            <Table
              columns={columnsList}
              dataSource={orderList}
              bordered
              size="large"
              rowKey={record => record.id}
              pagination={listPaginationProps}
              scroll={{ x: 950 }}
            />
          </Col>
        </Row>
      </div>
    );
  }
}

function mapStateToProps(state) {
  const { orderList, orderTotal, currentPage, currentPageSize } = state.order;

  return {
    orderList,
    orderTotal,
    currentPageSize,
    currentPage,
  };
}

export default connect(mapStateToProps)(Form.create()(AbnormalOrder));
